<template>
  <div class="app-container">
    <!--<h1>开发中...</h1>-->
    <h1 v-if="notIeMsg" class="regColor">请在IE浏览器上浏览</h1>
    <el-button id="videotape" type="primary" v-show="!startVideotape" @click="selectDir" size="medium">录像</el-button>
    <el-button id="videotape" type="danger" v-show="startVideotape" @click="stoprecord" size="medium">停止</el-button>
    <el-button size="medium" v-show="startVideotape">{{timePrefix+' '+timeStr}}</el-button>
    <span style="color:red;margin-left: 20px;">录像功能需要对IE右键，以管理员身份运行，才能往磁盘上写文件</span>
    <br>
    <!--<div style="position: relative;">-->
      <!--<object class="video leftVideo"-->
              <!--classid="clsid:0196C135-5143-4B01-BD78-595946CB4840"-->
              <!--codebase="WebPluginActiveX.cab#version=1,0,0,2" width="400px" height="533px"></object>-->
      <!--<div style="height: 533px;width: 537px;position: absolute;left: 400px;top: 0px;background: #000">-->
        <!--<object  style="position: absolute;top: 65px;left: 2px;" class="video rightVideo"-->
                <!--classid="clsid:0196C135-5143-4B01-BD78-595946CB4840"-->
                <!--codebase="WebPluginActiveX.cab#version=1,0,0,2" width="533px" height="400px"></object>-->
      <!--</div>-->

      <!--&lt;!&ndash;<div style="width: 400px;height: 533px;border: 1px solid red;display: inline-block;"></div>&ndash;&gt;-->
      <!--&lt;!&ndash;<div style="width: 533px;height: 400px;border: 1px solid red;display: inline-block;position: absolute;top: 60px;"></div>&ndash;&gt;-->
    <!--</div>-->


    <object ref="objectElem" id="WebPluginActiveX" class="videoHide"
            classid="clsid:0196C135-5143-4B01-BD78-595946CB4840"
            codebase="WebPluginActiveX.cab#version=1,0,0,2" style="min-height:350px;" width="933px" height="533px" ></object>
    <div>
      <br>
      <el-link :underline="false">主码流分辨率（左边视频）：600*800</el-link>
      <br>
      <el-link :underline="false">子码流分辨率（右边视频）：800*600</el-link>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "videoPreview",
      data:function(){
          return{
            notIeMsg:false,
            getImgInterval:'',
            height:0,
            hour:0,
            minute:0,
            second:0,
            ms:0,
            startVideotape:false,
            timePrefix:'时间',
            timeStr:'00:00:00',
            timer:'',
            ocxObj:'',
            rtspUrl1:'',
            rtspUrl2:'',
            videotapeIp1:'',
            videotapeIp2:'',
            selectDirStr:''
          }
      },
      beforeDestroy:function(){
        if(this.isIe()){
          var ocx=this.$refs.objectElem,
            _this=this,
            bye={
              method:'bye',
              param:{}
            }
          console.log('ocx',ocx);
          console.log('byeStr',JSON.stringify(bye));
          var res=ocx.PlayerCmd(JSON.stringify(bye))
          console.log('res', res);


          // 离开页面时，如果正在录像，结束录像
          if(this.startVideotape){
            this.stoprecord()
          }


          // 销毁onresize事件
          window.onresize=null
        }
      },
      methods:{
          selectDir:function(){
            var str = {
              method:'selectdir',
              param:{}
            },setrecordconfigStr={
              method:'setrecordconfig',
              param:{
                picsavedir:'C:\/',
                filesavedir:'',
                savemode:2,
                filesavetime:60,
                filesavesize:256,
                fps:25,
                timebase:90000
              }
            }
            //显示选择文件夹弹窗
            var filePathObj=JSON.parse(this.ocxObj.PlayerCmd(JSON.stringify(str)));
            console.log('选择文件夹',filePathObj);
            // debugger
            if(filePathObj.result=='ok'&&filePathObj.param){
              setrecordconfigStr.param.filesavedir=filePathObj.param.filedir
              this.selectDirStr=filePathObj.param.filedir
              // return
              var setDirObj=JSON.parse(this.ocxObj.PlayerCmd(JSON.stringify(setrecordconfigStr)))
              console.log('设置控件保存路径JSON', setrecordconfigStr);
              console.log('设置控件保存路径反馈',setDirObj);

              if(setDirObj.result=='ok'){
                // this.tips('OK','success')

                //通知控件开始录像
                this.startrecordbyip(this.videotapeIp1)
                this.startrecordbyip(this.videotapeIp2)
              }else{
                this.tips('设置视频保存路径失败','warning')
              }
            }
            // else{
            //   this.tips('选择文件夹窗口打开失败','warning')
            // }
          },
        startrecordbyip:function(url){
            // 开始录像
            var str={
              method:'startrecordbyip',
              param:{
                channel_ip:url,
                sessionid:'540e1799-60c8-436c-9940-7c5d2d753999',
                user:'admin'
              }
            }

          console.log('录像JSON', str);
          // ocx=document.getElementById("WebPluginActiveX")
          var res=JSON.parse(this.ocxObj.PlayerCmd(JSON.stringify(str)))
          // debugger
          console.log('录像反馈', res);
          if(res.result != "ok"){
            this.tips('录像失败，请稍后再试','warning')
          }else{
            if(!this.timer){
              // 显示计时界面
              this.timeStart()
            }

          }
        },
        stoprecord:function(){
            // 通知控件结束录像
            this.stoprecordbyip(this.videotapeIp1)
            this.stoprecordbyip(this.videotapeIp2)
          // 隐藏计时界面
          this.stopTime()
          this.timer=null
        },
        stoprecordbyip:function(url){
            //控件停止录像
          var str={
              method:'stoprecordbyip',
              param:{
                channel_ip:url,
                sessionid:'540e1799-60c8-436c-9940-7c5d2d753999',
                user:'admin'
              }
            }
          // ocx=document.getElementById("WebPluginActiveX")
          var res=JSON.parse(this.$refs.objectElem.PlayerCmd(JSON.stringify(str)))
          console.log('停止录像JSON', str);
          console.log('停止录像反馈', res);
          if(res.result != "ok"){
            this.tips('录像文件保存失败，请稍后再试','warning')
          }
        },
          stopTime:function(){
            clearInterval(this.timer)
            alert('文件保存在：'+this.selectDirStr)
            this.startVideotape=false
            this.hour=0
            this.ms=0
            this.minute=0
            this.second=0
            this.timeStr='00:00:00.0'
          },
          timeStart:function(){
            this.tips('开始录像','success')
            // this.selectDir()
            // return
            this.startVideotape=true
            this.timer=setInterval(this.timeFn,1000)
          },
          timeFn:function(){
            this.second+=1
            if(this.second>=60){
              this.second=0
              this.minute+=1
            }
            if(this.minute>=60){
              this.minute=0
              this.hour+=1
            }
            this.timeStr=this.toDub(this.hour)+':'+this.toDub(this.minute)+':'+this.toDub(this.second)
            // console.log(this.timeStr);
          },
        toDub (n) {//补0操作
            return n<10?'0' + n:n
          },

          setOcxHeight:function(){
            this.height=window.innerHeight-450
          },
        getImg:function(ocxObject) {
          var strJson = {
            method:'showjpeg',
            param:{
              jpeglist:[
                {
                  url:'http://'+this.BASE.serverIP+':8095/download/left.jpg',
                  ref_time:1000,
                  win_indx:3
                },{
                  url:'http://'+this.BASE.serverIP+':8095/download/right.jpg',
                  ref_time:1000,
                  win_indx:4
                }
              ],
            }
          };
          var result = ocxObject.PlayerCmd(JSON.stringify(strJson));
          console.log('showjpeg参数',JSON.stringify(strJson));
          console.log('showjpeg',result);
        },
        ocxLang:function(ocxObject){
          console.log('object*************',ocxObject);
          var strJson = {
            method:'setlanguage',
            param:{
              value:0
            }
          };
          console.log('准备设置语言');
          console.log('设置语言的json',JSON.stringify(strJson));
          var result = ocxObject.PlayerCmd(JSON.stringify(strJson));
          // console.log('setlanguage',result);
          console.log('语言完毕，返回值',result);
        },
        setloguploadflag:function(ocxObject){
          var strJson = {
            method:'setloguploadflag',
            param:{
              value:0
            }
          };
          var result = ocxObject.PlayerCmd(JSON.stringify(strJson));
          console.log('setloguploadflag',result);
        },
        setshowmode:function(ocxObject){
          var strJson = {
            method:'setshowmode',
            param:{
              index:7
            }
          };
          var result = JSON.parse(ocxObject.PlayerCmd(JSON.stringify(strJson)));
          console.log(result,'setshowmode');
          if (result.result != "ok") {
            console.log('初始化模式失败', 'warning');
          } else {}
        },
        startRightVideo:function(ocxObject){
          var vedioList=[
              {
                rtsp_url:this.rtspUrl2,
                ip:this.BASE.serverIP,
                user:'admin',
                password:'a12345678',
                index:1,
                protocol:3
              }
            ],
            playerJson={
              method:'startallvedio',
              param:{
                vediolist:vedioList,
                sessionid:'aaa',
                user:'bbb'
              }
            }

          var res=ocxObject.PlayerCmd(JSON.stringify(playerJson))
          console.log('播放右侧参数',JSON.stringify(playerJson));
          // console.log('播放地址',vedioList);
          console.log('播放右侧视频',res);
        },
        startallvedio:function(ocxObject){
          var videoIP="192.168.101.21",
            vedioList=[
                {
                  // rtsp_url:'rtsp://'+this.BASE.serverIP+':554/h264/ch1/main/av_stream',
                  rtsp_url:this.rtspUrl1,
                  ip:this.BASE.serverIP,
                  user:'admin',
                  password:'a12345678',
                  index:1,
                  protocol:3
                },
                {
                  // rtsp_url:'rtsp://'+this.BASE.serverIP+':554/h264/ch1/main/av_stream',
                  rtsp_url:this.rtspUrl2,
                  ip:this.BASE.serverIP,
                  user:'admin',
                  password:'a12345678',
                  index:2,
                  protocol:3
                }
            ],
            playerJson={
              method:'startallvedio',
                param:{
                vediolist:vedioList,
                  sessionid:'aaa',
                  user:'bbb'
              }
          }

          var res=ocxObject.PlayerCmd(JSON.stringify(playerJson))
          console.log('播放左侧参数',JSON.stringify(playerJson));
          // console.log('播放地址',vedioList);
          console.log('播放左侧视频',res);
        },
        isIe:function() {
          var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
          var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
          var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
          var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
          if(isIE) {
            var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
            reIE.test(userAgent);
            var fIEVersion = parseFloat(RegExp["$1"]);
            if(fIEVersion == 7) {
              return 7;
            } else if(fIEVersion == 8) {
              return 8;
            } else if(fIEVersion == 9) {
              return 9;
            } else if(fIEVersion == 10) {
              return 10;
            } else {
              return 6;//IE版本<=7
            }
          } else if(isEdge) {
            return 'edge';//edge
          } else if(isIE11) {
            return 11; //IE11
          }else{
            return false;//不是ie浏览器
          }

          return
          if (!!window.ActiveXObject || "ActiveXObject" in window)
            return true;
          else
            return false;
        }
      },mounted:function () {
        var ocx=document.getElementById('WebPluginActiveX'),
          _this=this
        this.ocxObj=ocx
        this.videotapeIp1=this.BASE.serverIP+':8554'
        this.videotapeIp2=this.BASE.serverIP+':8555'
        console.log(342,this.videotapeIp1, this.videotapeIp2);
        this.rtspUrl1='rtsp://admin:mv123456@'+this.BASE.serverIP+':8554/h264/ch1/main/av_stream'
        this.rtspUrl2='rtsp://admin:mv123456@'+this.BASE.serverIP+':8555/h264/ch1/main/av_stream'
        // console.log('ocx',ocx);
        if(!_this.isIe()){
          _this.notIeMsg=true
          }else{
            // _this.setOcxHeight()
            setTimeout(function () {
              _this.ocxLang(ocx)
              _this.setloguploadflag(ocx)
              _this.setshowmode(ocx)
              _this.startallvedio(ocx)

              // _this.getImg(ocx)
            },1000)
            window.onresize=function () {
              _this.setOcxHeight()
            }
          }
      }
    }
</script>

<style scoped>
  .app-container{
    height: 100%;
  }
.regColor{
  color:red;
}
  .previewImg{
    background: #F0F0F0;
    display: inline-block;
  }
  .image{
    width: 500px;
    height: 400px;
  }
  #videotape{
    margin-bottom: 10px;
  }
</style>
